<!--
 * @Author: ranjianglai
 * @Date: 2023-01-12 17:27:41
 * @Description: 订单详情
-->


<template>
    <view class="type-area cus-page">
        <!-- 列表 -->
        <view class="com-m-t-20" v-for="(item,index) in list" :key="index">
            <ct-business-list :cardData="item" @clickButton="clickButton" />
        </view>

        <!-- 订单信息 -->
        <view class="com-m-t-20" v-for="(item,index) in rowList" :key="index">
            <ct-row-list :datas="item" />
        </view>

        <!-- 订单状态 -->
        <view class="com-m-t-20 com-card status">
            <text class="type-area com-font-32 com-font-bold">订单状态</text>
            <view class="type-area">
                <u-steps :current="status.current" dot direction="column" activeColor="#02BDF3">
                    <u-steps-item v-for="(item,index) in status.list" :key="index"
                        :title="item.title" :desc="item.desc+'\n'+item.time">
                    </u-steps-item>
                </u-steps>
            </view>
            <view class="com-m-t-20 com-flex com-row-center">
                <u-button :text="status.more ? '查看更多' : '收起' " 
                    shape="circle"
                    :customStyle="{width:'168rpx',height:'48rpx',margin: 0,fontSize:'24rpx',border:'1px solid #02BDF3', color:'#02BDF3'}"
                    @click="status.more = !status.more">
                </u-button>
            </view>
            <view v-if="status.more" class="type-area com-m-t-30 com-flex com-p-t-32 shou">
                <view class="bg">收</view>
                <view class="com-lh-40" style="flex:1">庄换羽，15245542157，四川省成都市清雅昂区，十陵西路奎光塔街道学府路286号</view>
            </view>
        </view>

        <view class="com-m-t-20 com-flex com-row-right com-p-32 com-p-t-20 com-p-b-20">
            <u-button text="取消订单" 
                shape="circle"
                :customStyle="{width:'168rpx',height:'60rpx',margin: '0 24rpx 0 0',fontSize:'24rpx',border:'1px solid #888888', color:'#212122'}"
                @click="status.more = !status.more">
            </u-button>
                <u-button text="继续付款" 
                shape="circle"
                :customStyle="{width:'168rpx',height:'60rpx',margin: 0,fontSize:'24rpx',border:'1px solid #02BDF3', color:'#02BDF3'}"
                @click="status.more = !status.more">
            </u-button>
        </view>

        <!-- 底部安全距离 -->
        <u-gap v-if="mixinGetSysInfo().platform == 'devtools'" height="30rpx" bgColor="transparent"></u-gap>
    </view>
</template>


<script>
export default {
    name: 'orderDetail',
    components: {},
    props: {},

    data() {
        return {
            list: [
                { 
                    logo: '/static/logo.ico',
                    name: 'rakuma卖家：泡泡玛特',
                    list: [
                        { 
                            imgUrl: '/static/temporary/img2.jpg',
                            title: '宝可梦集换式卡牌游戏PTCGA 简中日月第一弹测试测试',
                            tag: '新品',
                            price: 1660,
                            num: 1
                        },
                        { 
                            imgUrl: '/static/temporary/img2.jpg',
                            title: '宝可梦集换式卡牌游戏PTCGA 简中日月第一弹测试测试',
                            tag: '二手',
                            price: 6688,
                            num: 5
                        }
                    ]
                }
            ],
            rowList:[
                {
                    list: [
                        { title: '商品总价', value:'1日元=0.0529人名币' },
                        { title: '日本国内运费', value:'1660日元' },
                        { title: '实付款', value:'0日元' },
                    ]
                },
                {
                    list: [
                        { title: '收货信息', value:'庄换羽，15245542157，四川省成都市清雅昂区，十陵西路奎光塔街道学府路286号' },
                        { title: '订单编号', value:'25421548753254125412', type: "copy" },
                        { title: '增值服务', value:'上传商品备注服务，图像依据', type: "detail"  },
                        { title: '消费积分', value:'会员经验+35分', type: "detail" },
                        { title: '付款时间', value:'2022-12-09 15:36'},
                        { title: '支付方式', value:'信用卡支付' },
                    ]
                }
            ],
            status: {
                current: 0,
                list: [
                    { title: "已完成" , desc: "您已在成都三染未然健康城取件，感谢您使用拍拍皮，期待再次为您服务", time: "2022-12-15 17:28:35" },
                    { title: "已发货" , desc: "您的订单已发货，预计12月12日到达国内", time: "2022-12-15 17:28:35" },
                    { title: "已入库" , desc: "您的货品已签收/查看，订单已经打印完成，拣货完成", time: "2022-12-15 17:28:35" },
                    { title: "卖家已发货" , desc: "您的订单已发货，预计12月9日到达日本仓库", time: "2022-12-15 17:28:35" },
                    { title: "已下单" , desc: "温馨提示：您的订单将从卖家端发货", time: "2022-12-15 17:28:35" },
                    { title: "订单已提交" , desc: "订单信息已处理，下单成功  ", time: "2022-12-15 17:28:35" },
                ],
                more: false,
            }
        };
    },

    computed: {},
    watch: {},

    methods: {},

    created() { },
    mounted() { },
    beforeCreate() { },
    beforeMount() { },
    beforeUpdate() { },
    updated() { },
    beforeDestroy() { },
    destroyed() { },
    activated() { },
}
</script>


<style lang='scss' scoped>
    /deep/.status{
        padding: 32rpx 0;
        .u-steps-item{
            margin-top: 30rpx;
            .u-steps-item__line{
                left: 18rpx !important;
            }
            &:first-child{
                .u-text__value{
                    color: #02BDF3 !important;
                }
            }
            .u-text__value{
                font-size: 32rpx !important;
            }
            .u-text__value--tips{
                margin-top: 10rpx;
                font-size: 28rpx !important;
                line-height: 40rpx;
            }
        }
        .shou{
            border-top: 1px dashed #E2E2E2;;
            .bg{
                width: 60rpx;
                height: 60rpx;
                margin-right: 24rpx;
                background: #D8F6FF;
                border-radius: 50%;
                text-align: center;
                line-height: 60rpx;
                font-size: 32rpx;
                color: #02BDF3;
            }
        }
    }
</style>